<link href="/js/ext/resources/css/ext-all.css" rel="stylesheet"/>
<script type="text/javascript" src="/js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/ext/ext-all-debug.js"></script>


<script type="text/javascript">

data = eval(<? echo $data ?>);
artist_data = eval(<? echo $artist_data ?>);

function showPost(post)
{
	return '<a href="' + post + '"/>Post</a>';
}

function updateTrack(track_id)
{
	var track = grid.store.getById(track_id);

	
	Ext.Ajax.request({
		url: '/track/edit/'+track_id,
		params: track.data,
		method: 'POST',
		success: function(data)
		{
			console.log(data);
		}
	});
}

function changeArtist(field, new_value, old)
{
	console.log(new_value);
	
	return true;
}

Ext.onReady(function(){

	var artist_store = new Ext.data.JsonStore({
	    fields: ['Artist-id', 'Artist-name'],
	    data : artist_data
	});


	statuses = [{'Track-status': 'active'}, {'Track-status': 'disabled'}, {'Track-status': 'duplicate'}, {'Track-status': 'missing'}];

	
    status_store = new Ext.data.JsonStore({
        fields: [
           {name: 'Track-status'}
        ],
        data: statuses
    });
    
	
	artists = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({url: '/user/artist_box'}),
    reader: new Ext.data.JsonReader({
        root: 			"data",
        totalProperty:	"recordcount"
    }, [
    	{name: 'Artist-name'   }
	])
})
	
    // example of custom renderer function
    function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

    // create the data store
    var store = new Ext.data.JsonStore({
	    proxy: new Ext.data.HttpProxy({url: '/user/tracks_ajax'}),
	    id: 'Track-id',
	        root: 			"data",
	        totalProperty:	"recordcount",
	        remoteSort: true,
	        sortInfo: {field: 'Track-id', direction: 'DESC'},
	    	fields: [

	           {name: 'Track-name'},
	           {name: 'Artist-name'},
	           {name: 'Track-song'},
	           {name: 'Post-link'},
	           {name: 'Track-id'},
	           {name: 'Track-date'},
	           {name: 'Track-status'},
	           {name: 'filesize'},
	           {name: 'functions'}
        	]
        
    });

    // create the Grid
    grid = new Ext.grid.EditorGridPanel({
        store: store,
        bbar: new Ext.PagingToolbar({pageSize: 25, store: store}),
        columns: [
            {id:'track-id', width: 40, header: "ID", sortable: true, dataIndex: 'Track-id'},
            {header: "Name",  width: 400, sortable: true, dataIndex: 'Track-name'},
            {header: "Artist", width: 220, sortable: true, dataIndex: 'Artist-name' ,
            	editor: new Ext.form.ComboBox({
	               typeAhead: true,
	               triggerAction: 'all',
	               forceSelection: false,
	               displayField:'Artist-name',
	               valueField: 'Artist-name',
	               store: artists,
	               selectOnFocus: true,
	               onChange: changeArtist
	            })},
	        {header: "Song", width: 220, dataIndex: 'Track-song',
	        	editor: new Ext.form.TextField({
               		allowBlank: false
           		})},
            {header: "Post", width: 40, renderer: showPost, sortable: true, dataIndex: 'Post-link'},
            {header: "Date",  width: 95, sortable: true, dataIndex: 'Track-date'},
            {header: "Status", width: 90, sortable: true, dataIndex: 'Track-status' ,
            	editor: new Ext.form.ComboBox({
	               typeAhead: true,
	               mode: 'local',
	               triggerAction: 'all',
	               forceSelection: true,
	               displayField:'Track-status',
	               valueField: 'Track-status',
	               store: status_store,
	               selectOnFocus: true,
	            })},      
	        {header: 'Size', dataIndex: 'filesize', width: 70},      
            {dataIndex: 'functions', width: 50}
        ],
        stripeRows: true,
		height: 600,
        title:'Tracks'
    });

    grid.render('tracks');
    store.load({params:{start:0, limit:25}});

});



</script>

<div id="tracks" style="margin: 10px">

</div>